<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填报人员设置总览</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            overflow: hidden;
        }
        
        .container {
            height: 100vh;
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .main-content {
            flex: 1;
            padding: 20px;
            overflow: auto;
        }
        

        
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid #e9ecef;
        }
        
        .table-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .table-content {
            overflow-x: auto;
        }
        
        .staff-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1000px;
            table-layout: fixed;
        }
        
        .staff-table th,
        .staff-table td {
            border: 1px solid #e9ecef;
            padding: 8px;
            text-align: center;
            vertical-align: middle;
            height: 48px;
            box-sizing: border-box;
        }
        
        .staff-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .staff-table th:first-child,
        .staff-table th:nth-child(2),
        .staff-table th:nth-child(3) {
            position: sticky;
            background: #f8f9fa;
            z-index: 20;
        }
        
        .staff-table th:first-child {
            left: 0;
            width: 200px;
            min-width: 200px;
        }
        
        .staff-table th:nth-child(2) {
            left: 200px;
            width: 200px;
            min-width: 200px;
        }
        
        .staff-table th:nth-child(3) {
            left: 400px;
            width: 150px;
            min-width: 150px;
        }
        
        .staff-table th:nth-child(4),
        .staff-table th:nth-child(5),
        .staff-table th:nth-child(6),
        .staff-table th:nth-child(7) {
            width: 150px;
            min-width: 150px;
        }
        
        .staff-table td:first-child,
        .staff-table td:nth-child(2),
        .staff-table td:nth-child(3) {
            position: sticky;
            background: white;
            z-index: 10;
            text-align: left;
            font-weight: 500;
        }
        
        .staff-table td:first-child {
            left: 0;
            width: 200px;
        }
        
        .staff-table td:nth-child(2) {
            left: 200px;
            width: 200px;
        }
        
        .staff-table td:nth-child(3) {
            left: 400px;
            width: 150px;
        }
        
        .staff-table td:nth-child(4),
        .staff-table td:nth-child(5),
        .staff-table td:nth-child(6),
        .staff-table td:nth-child(7) {
            width: 150px;
        }
        
        .data-row {
            background: white;
            height: 48px;
        }
        
        .data-row:hover {
            background: #f5f7fa;
        }
        
        .empty-cell {
            background: #f5f5f5;
            color: #999;
        }
        
        .staff-input {
            width: 100%;
            height: 32px;
            border: 1px solid transparent;
            background: transparent;
            text-align: center;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 1.4;
            resize: none;
            overflow: hidden;
        }
        
        .staff-input:focus {
            background: #f0f9ff;
            outline: none;
            border: 1px solid #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
        
        .staff-input:hover {
            background: #f5f7fa;
        }
        
        .staff-select {
            width: 100%;
        }
        
        .staff-select .el-select__input {
            height: 28px;
            line-height: 28px;
        }
        
        .staff-select .el-select__caret {
            color: #c0c4cc;
        }
        
        .staff-select .el-select__caret.is-reverse {
            color: #409eff;
        }
        
        .staff-select .el-input__suffix {
            right: 5px;
        }
        
        .node-type-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        
        .node-type-division {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        
        .node-type-bu {
            background-color: #f6ffed;
            color: #52c41a;
        }
        
        .function-badge {
            background-color: #fff7e6;
            color: #fa8c16;
        }
        
        .summary-panel {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }
        
        .summary-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            border-left: 3px solid #409eff;
            padding-left: 10px;
        }
        
        .summary-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .stat-card {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 15px;
            text-align: center;
            border: 1px solid #e9ecef;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: 600;
            color: #409eff;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            color: #606266;
        }
        
        .export-section {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .no-data {
            text-align: center;
            padding: 60px 20px;
            color: #909399;
        }
        
        .no-data i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #dcdfe6;
        }
        
        .no-data h3 {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #606266;
        }
        
        .no-data p {
            margin: 0;
            font-size: 14px;
        }
        
        /* 滚动条样式 */
        .main-content::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        .main-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        .main-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        
        .main-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="container">
            
            <!-- 主要内容区域 -->
            <div class="main-content">
                
                <!-- 统计摘要 -->
                <div class="summary-panel" v-if="hasData">
                    <div class="summary-title">统计摘要</div>
                    <div class="summary-stats">
                        <div class="stat-card">
                            <div class="stat-number">{{ summaryStats.totalDivisions }}</div>
                            <div class="stat-label">Division总数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">{{ summaryStats.totalBUs }}</div>
                            <div class="stat-label">BU总数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">{{ summaryStats.totalFunctions }}</div>
                            <div class="stat-label">职能总数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">{{ summaryStats.configuredCount }}</div>
                            <div class="stat-label">已配置人员</div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据表格 -->
                <div class="table-container" v-if="hasData">
                    <div class="table-header">
                        <span>填报人员设置详情</span>
                        <div class="export-section">
                            <el-button type="success" size="small" @click="saveSettings">
                                <i class="el-icon-check"></i> 保存设置
                            </el-button>
                        </div>
                    </div>
                    <div class="table-content">
                        <table class="staff-table">
                            <thead>
                                <tr>
                                    <th>Division</th>
                                    <th>BU</th>
                                    <th>Function</th>
                                    <th>Permanent</th>
                                    <th>Overtime/FTE</th>
                                    <th>Temporary</th>
                                    <th>DL/IDL</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in filteredData" :key="'row-' + item.division.id + '-' + item.bu.id + '-' + item.functionName" class="data-row">
                                    <td>
                                        <span class="node-type-badge node-type-division">Division</span>
                                        {{ getNodeDisplayName(item.division) }}
                                    </td>
                                    <td>
                                        <span class="node-type-badge node-type-bu">BU</span>
                                        {{ getNodeDisplayName(item.bu) }}
                                    </td>
                                    <td>
                                        <span class="function-badge">{{ item.functionName }}</span>
                                    </td>
                                    <td>
                                        <el-select 
                                            :value="getStaffSetting(item.bu, item.functionName, 'permanent')"
                                            @change="updateStaffSetting(item.bu, item.functionName, 'permanent', $event)"
                                            filterable
                                            clearable
                                            placeholder="请选择人员"
                                            class="staff-select"
                                            size="small"
                                        >
                                            <el-option
                                                v-for="person in availableStaff"
                                                :key="person.id"
                                                :label="person.name"
                                                :value="person.name"
                                            >
                                                <span>{{ person.name }}</span>
                                                <span style="float: right; color: #8492a6; font-size: 13px">{{ person.code }}</span>
                                            </el-option>
                                        </el-select>
                                    </td>
                                    <td>
                                        <el-select 
                                            :value="getStaffSetting(item.bu, item.functionName, 'overtime')"
                                            @change="updateStaffSetting(item.bu, item.functionName, 'overtime', $event)"
                                            filterable
                                            clearable
                                            placeholder="请选择人员"
                                            class="staff-select"
                                            size="small"
                                        >
                                            <el-option
                                                v-for="person in availableStaff"
                                                :key="person.id"
                                                :label="person.name"
                                                :value="person.name"
                                            >
                                                <span>{{ person.name }}</span>
                                                <span style="float: right; color: #8492a6; font-size: 13px">{{ person.code }}</span>
                                            </el-option>
                                        </el-select>
                                    </td>
                                    <td>
                                        <el-select 
                                            :value="getStaffSetting(item.bu, item.functionName, 'temporary')"
                                            @change="updateStaffSetting(item.bu, item.functionName, 'temporary', $event)"
                                            filterable
                                            clearable
                                            placeholder="请选择人员"
                                            class="staff-select"
                                            size="small"
                                        >
                                            <el-option
                                                v-for="person in availableStaff"
                                                :key="person.id"
                                                :label="person.name"
                                                :value="person.name"
                                            >
                                                <span>{{ person.name }}</span>
                                                <span style="float: right; color: #8492a6; font-size: 13px">{{ person.code }}</span>
                                            </el-option>
                                        </el-select>
                                    </td>
                                    <td>
                                        <el-select 
                                            :value="getDLIDLSetting(item.bu, item.functionName)"
                                            @change="updateDLIDLSetting(item.bu, item.functionName, $event)"
                                            clearable
                                            placeholder="请选择类型"
                                            class="staff-select"
                                            size="small"
                                        >
                                            <el-option
                                                label="DL"
                                                value="DL"
                                            >
                                                <span>DL</span>
                                            </el-option>
                                            <el-option
                                                label="IDL"
                                                value="IDL"
                                            >
                                                <span>IDL</span>
                                            </el-option>
                                        </el-select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 无数据状态 -->
                <div class="no-data" v-else>
                    <i class="el-icon-folder-opened"></i>
                    <h3>暂无数据</h3>
                    <p>请先在组织架构维护页面配置BU的职能和人员设置</p>
                    <el-button type="primary" @click="goToOrganization">前往组织架构维护</el-button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    flatData: [],
                    currentView: 'china', // 默认中国区视图
                    availableStaff: [
                        { id: 'emp001', code: '12345', name: '张三' },
                        { id: 'emp002', code: '12346', name: '李四' },
                        { id: 'emp003', code: '12347', name: '王五' },
                        { id: 'emp004', code: '12348', name: '赵六' },
                        { id: 'emp005', code: '12349', name: '临时工A' },
                        { id: 'emp006', code: '12350', name: '陈七' },
                        { id: 'emp007', code: '12351', name: '刘八' },
                        { id: 'emp008', code: '12352', name: '孙九' },
                        { id: 'emp009', code: '12353', name: '周十' },
                        { id: 'emp010', code: '12354', name: '临时维修员' },
                        { id: 'emp011', code: '12355', name: '客服专员A' },
                        { id: 'emp012', code: '12356', name: '客服专员B' },
                        { id: 'emp013', code: '12357', name: '客服专员C' },
                        { id: 'emp014', code: '12358', name: '技术支持A' },
                        { id: 'emp015', code: '12359', name: '临时技术支持' },
                        { id: 'emp016', code: '12360', name: '产品经理A' },
                        { id: 'emp017', code: '12361', name: '开发工程师A' },
                        { id: 'emp018', code: '12362', name: '实习生A' },
                        { id: 'emp019', code: '12363', name: '销售经理A' },
                        { id: 'emp020', code: '12364', name: '销售代表A' },
                        { id: 'emp021', code: '12365', name: '销售代表B' },
                        { id: 'emp022', code: '12366', name: '供应链经理A' },
                        { id: 'emp023', code: '12367', name: '供应链专员A' },
                        { id: 'emp024', code: '12368', name: '设备工程师A' },
                        { id: 'emp025', code: '12369', name: '设备工程师B' },
                        { id: 'emp026', code: '12370', name: '质检员A' },
                        { id: 'emp027', code: '12371', name: '质检员B' },
                        { id: 'emp028', code: '12372', name: '工艺工程师A' },
                        { id: 'emp029', code: '12373', name: '工艺工程师B' },
                        { id: 'emp030', code: '12374', name: '质量工程师A' },
                        { id: 'emp031', code: '12375', name: '质量工程师B' },
                        { id: 'emp032', code: '12376', name: '服务质量专员A' },
                        { id: 'emp033', code: '12377', name: '服务质量专员B' },
                        { id: 'emp034', code: '12378', name: '维修工程师A' },
                        { id: 'emp035', code: '12379', name: '维修工程师B' },
                        { id: 'emp036', code: '12380', name: '测试工程师A' },
                        { id: 'emp037', code: '12381', name: '测试工程师B' },
                        { id: 'emp038', code: '12382', name: '研究员A' },
                        { id: 'emp039', code: '12383', name: '研究员B' },
                        { id: 'emp040', code: '12384', name: '研究员C' },
                        { id: 'emp041', code: '12385', name: '设备维护员A' },
                        { id: 'emp042', code: '12386', name: '设备维护员B' },
                        { id: 'emp043', code: '12387', name: '国际销售经理A' },
                        { id: 'emp044', code: '12388', name: '国际销售经理B' },
                        { id: 'emp045', code: '12389', name: '国际销售代表A' },
                        { id: 'emp046', code: '12390', name: '国际销售代表B' },
                        { id: 'emp047', code: '12391', name: '仓库管理员A' },
                        { id: 'emp048', code: '12392', name: '仓库管理员B' },
                        { id: 'emp049', code: '12393', name: '临时仓库员' },
                        { id: 'emp050', code: '12394', name: '仓库主管A' },
                        { id: 'emp051', code: '12395', name: '仓库管理员C' },
                        { id: 'emp052', code: '12396', name: '临时仓库工' },
                        { id: 'emp053', code: '12397', name: '物流经理A' },
                        { id: 'emp054', code: '12398', name: '物流专员A' },
                        { id: 'emp055', code: '12399', name: '物流专员B' },
                        { id: 'emp056', code: '12400', name: '物流专员C' },
                        { id: 'emp057', code: '12401', name: '临时物流员' },
                        { id: 'emp058', code: '12402', name: '仓储主管A' },
                        { id: 'emp059', code: '12403', name: '仓储管理员B' },
                        { id: 'emp060', code: '12404', name: '仓储管理员C' },
                        { id: 'emp061', code: '12405', name: '临时仓储工' }
                    ]
                }
            },
            mounted() {
                this.loadTreeData();
            },
            computed: {
                // 扁平化的数据列表
                filteredData() {
                    if (!this.flatData || this.flatData.length === 0) return [];
                    
                    return this.flatData.map(item => ({
                        division: item.bu.division,
                        bu: item.bu,
                        functionName: item.function,
                        categories: item.categories
                    }));
                },
                
                // 是否有数据
                hasData() {
                    return this.filteredData.length > 0;
                },
                
                // 统计摘要
                summaryStats() {
                    const divisions = new Set();
                    const bus = new Set();
                    const functions = new Set();
                    let configuredCount = 0;
                    
                    this.flatData.forEach(item => {
                        divisions.add(item.bu.division.id);
                        bus.add(item.bu.id);
                        functions.add(item.function);
                        
                        // 检查是否有配置的人员
                        if (item.categories && item.categories.some(cat => cat.responsible)) {
                            configuredCount++;
                        }
                    });
                    
                    return {
                        totalDivisions: divisions.size,
                        totalBUs: bus.size,
                        totalFunctions: functions.size,
                        configuredCount
                    };
                }
            },
            methods: {
                loadTreeData() {
                    // 从本地存储加载数据
                    const savedData = localStorage.getItem('flatData');
                    if (savedData) {
                        this.flatData = JSON.parse(savedData);
                    } else {
                        // 如果没有保存的数据，创建测试数据
                        this.createTestData();
                    }
                },
                
                createTestData() {
                    // 新的测试数据格式
                    this.flatData = [
                        {
                            "bu": {
                                "id": "bu-Powertrain-cp",
                                "name": "CP",
                                "division": {
                                    "id": "div-Powertrain",
                                    "name": "Powertrain"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp001",
                                        "code": "12345",
                                        "name": "张三"
                                    }
                                },
                                {
                                    "type": "Overtime",
                                    "responsible": {
                                        "id": "emp002",
                                        "code": "12346",
                                        "name": "李四"
                                    }
                                },
                                {
                                    "type": "Temporary",
                                    "responsible": {
                                        "id": "emp003",
                                        "code": "12347",
                                        "name": "王五"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Powertrain-cp",
                                "name": "CP",
                                "division": {
                                    "id": "div-Powertrain",
                                    "name": "Powertrain"
                                }
                            },
                            "function": "生产",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp004",
                                        "code": "12348",
                                        "name": "赵六"
                                    }
                                },
                                {
                                    "type": "Temporary",
                                    "responsible": {
                                        "id": "emp005",
                                        "code": "12349",
                                        "name": "用户A"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Powertrain-cp",
                                "name": "CP",
                                "division": {
                                    "id": "div-Powertrain",
                                    "name": "Powertrain"
                                }
                            },
                            "function": "质量",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp006",
                                        "code": "12350",
                                        "name": "陈七"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Powertrain-mfg",
                                "name": "MFG",
                                "division": {
                                    "id": "div-Powertrain",
                                    "name": "Powertrain"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp007",
                                        "code": "12351",
                                        "name": "刘八"
                                    }
                                },
                                {
                                    "type": "Overtime",
                                    "responsible": {
                                        "id": "emp008",
                                        "code": "12352",
                                        "name": "孙九"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Powertrain-mfg",
                                "name": "MFG",
                                "division": {
                                    "id": "div-Powertrain",
                                    "name": "Powertrain"
                                }
                            },
                            "function": "维修",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp009",
                                        "code": "12353",
                                        "name": "周十"
                                    }
                                },
                                {
                                    "type": "Temporary",
                                    "responsible": {
                                        "id": "emp010",
                                        "code": "12354",
                                        "name": "用户B"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Chassis-cs",
                                "name": "CS",
                                "division": {
                                    "id": "div-Chassis",
                                    "name": "Chassis"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp011",
                                        "code": "12355",
                                        "name": "用户C"
                                    }
                                },
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp012",
                                        "code": "12356",
                                        "name": "用户D"
                                    }
                                },
                                {
                                    "type": "Overtime",
                                    "responsible": {
                                        "id": "emp013",
                                        "code": "12357",
                                        "name": "用户E"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Chassis-ts",
                                "name": "TS",
                                "division": {
                                    "id": "div-Chassis",
                                    "name": "Chassis"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp014",
                                        "code": "12358",
                                        "name": "用户F"
                                    }
                                },
                                {
                                    "type": "Temporary",
                                    "responsible": {
                                        "id": "emp015",
                                        "code": "12359",
                                        "name": "用户G"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-rd-pd",
                                "name": "PD",
                                "division": {
                                    "id": "div-rd",
                                    "name": "Toolshop"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp016",
                                        "code": "12360",
                                        "name": "用户H"
                                    }
                                },
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp017",
                                        "code": "12361",
                                        "name": "用户I"
                                    }
                                },
                                {
                                    "type": "Temporary",
                                    "responsible": {
                                        "id": "emp018",
                                        "code": "12362",
                                        "name": "用户J"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Body-dom",
                                "name": "DOM",
                                "division": {
                                    "id": "div-Body",
                                    "name": "Body"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp019",
                                        "code": "12363",
                                        "name": "用户K"
                                    }
                                },
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp020",
                                        "code": "12364",
                                        "name": "用户M"
                                    }
                                },
                                {
                                    "type": "Overtime",
                                    "responsible": {
                                        "id": "emp021",
                                        "code": "12365",
                                        "name": "用户N"
                                    }
                                }
                            ]
                        },
                        {
                            "bu": {
                                "id": "bu-Toolshop-scm",
                                "name": "SCM",
                                "division": {
                                    "id": "div-Toolshop",
                                    "name": "Toolshop"
                                }
                            },
                            "function": "Default",
                            "categories": [
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp022",
                                        "code": "12366",
                                        "name": "用户X"
                                    }
                                },
                                {
                                    "type": "Permanent",
                                    "responsible": {
                                        "id": "emp023",
                                        "code": "12367",
                                        "name": "用户Y"
                                    }
                                }
                            ]
                        }
                    ];
                    
                    // 保存测试数据到本地存储
                    this.saveFlatData();
                },
                

                

                
                getNodeDisplayName(data) {
                    if (typeof data === 'string') {
                        return data;
                    }
                    
                    // 直接返回数据中的name，不进行转换
                    return data.name || '';
                },
                

                

                
                getStaffSetting(bu, functionName, category) {
                    // 从flatData中查找对应的数据项
                    const dataItem = this.flatData.find(item => 
                        item.bu.id === bu.id && item.function === functionName
                    );
                    
                    if (dataItem && dataItem.categories) {
                        const categoryData = dataItem.categories.find(cat => 
                            cat.type.toLowerCase() === category.toLowerCase()
                        );
                        if (categoryData && categoryData.responsible) {
                            return categoryData.responsible.name;
                        }
                    }
                    return '';
                },
                
                getDLIDLSetting(bu, functionName) {
                    // 从flatData中查找对应的数据项
                    const dataItem = this.flatData.find(item => 
                        item.bu.id === bu.id && item.function === functionName
                    );
                    
                    if (dataItem && dataItem.dlidl) {
                        return dataItem.dlidl;
                    }
                    return '';
                },
                
                updateStaffSetting(bu, functionName, category, value) {
                    // 从flatData中查找对应的数据项
                    const dataItemIndex = this.flatData.findIndex(item => 
                        item.bu.id === bu.id && item.function === functionName
                    );
                    
                    if (dataItemIndex === -1) {
                        // 如果不存在，创建新的数据项
                        const newDataItem = {
                            bu: bu,
                            function: functionName,
                            categories: []
                        };
                        this.flatData.push(newDataItem);
                        this.$set(this.flatData, this.flatData.length - 1, newDataItem);
                    }
                    
                    const dataItem = this.flatData[dataItemIndex !== -1 ? dataItemIndex : this.flatData.length - 1];
                    
                    // 查找或创建category
                    let categoryIndex = dataItem.categories.findIndex(cat => 
                        cat.type.toLowerCase() === category.toLowerCase()
                    );
                    
                    if (categoryIndex === -1) {
                        // 创建新的category
                        dataItem.categories.push({
                            type: category.charAt(0).toUpperCase() + category.slice(1),
                            responsible: null
                        });
                        categoryIndex = dataItem.categories.length - 1;
                    }
                    
                    // 更新responsible
                    if (value && typeof value === 'string') {
                        // 查找对应的人员
                        const person = this.availableStaff.find(p => p.name === value);
                        if (person) {
                            this.$set(dataItem.categories[categoryIndex], 'responsible', person);
                        }
                    } else {
                        // 清空操作
                        this.$set(dataItem.categories[categoryIndex], 'responsible', null);
                    }
                    
                    // 保存到本地存储
                    this.saveFlatData();
                },
                
                updateDLIDLSetting(bu, functionName, value) {
                    // 从flatData中查找对应的数据项
                    const dataItemIndex = this.flatData.findIndex(item => 
                        item.bu.id === bu.id && item.function === functionName
                    );
                    
                    if (dataItemIndex === -1) {
                        // 如果不存在，创建新的数据项
                        const newDataItem = {
                            bu: bu,
                            function: functionName,
                            categories: []
                        };
                        this.flatData.push(newDataItem);
                        this.$set(this.flatData, this.flatData.length - 1, newDataItem);
                    }
                    
                    const dataItem = this.flatData[dataItemIndex !== -1 ? dataItemIndex : this.flatData.length - 1];
                    
                    // 更新DL/IDL设置
                    this.$set(dataItem, 'dlidl', value);
                    
                    // 保存到本地存储
                    this.saveFlatData();
                },
                
                saveFlatData() {
                    localStorage.setItem('flatData', JSON.stringify(this.flatData));
                },
                
                saveSettings() {
                    this.saveFlatData();
                    this.$message.success('设置已保存');
                },
                

                

                
                goToOrganization() {
                    window.open('organization.html', '_blank');
                }
            }
        });
    </script>
</body>
</html> 